<template>
	<view class="themeItem">
		<view class="box">
			<image class="pic" :src="imageUrl" mode="aspectFill"></image>
			<view class="mask">
				<slot name="mask"></slot>
			</view>
			<view class="tab">
				<slot name="tab"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
defineProps({
	imageUrl:{
		type:String,
		default:''
	}
})




</script>

<style lang="scss" scoped>
	.themeItem {
		.box {
			height: 340rpx;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;

			.pic {
				width: 100%;
				height: 100%;
			}

			.mask {
				width: 100%;
				height: 70rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.2);
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(20rpx);
				font-weight: 600;
				font-size: 30rpx;
			}

			.tab {
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(250, 129, 90, 0.7);
				backdrop-filter: blur(20rpx);
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 14rpx;
				border-radius: 0 0 20rpx 0;
				transform: scale(0.8);
				transform-origin: left top;
			}
		}
	}
</style>